<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 100%;
      text-align: center;
      background: url('@/public/img/player/player.jpg');
      background-size: 100% 100%;
    }

    .header {
      display: flex;
      top: 50px;
    }

    .card_box {
      margin: 30px;
      width: 740px;
      display: flex;
      flex-wrap: nowrap;
      background: radial-gradient(at top left, #ffffff10, #d7edea10);
      border: 1px solid #ffcc80;
      box-shadow: 1px 2px 6px rgba(170, 31, 0, 0.2), 3px 8px 12px rgba(71, 35, 22, 0.3);
      z-index: 999;
      border-radius: 20px;
    }

    .user_top_left {
      text-align: center;
      margin-top: 30px;
      margin-left: 25px;
    }

    .user_top_right {
      float: right;
      text-align: left;
      margin-top: 20px;
      margin-right: 20px;
      border-radius: 20px;
      backdrop-filter: blur(40px);
    }

    .user_top_img_bottom {
      margin: auto;
      /* background-image: url('../../img/state/user_state.png'); */
      background-size: 100% auto;
      width: 280px;
      height: 280px;
    }

    .user_top_img {
      margin-top: 52px;
      margin-left: 2px;
      width: 172px;
      height: 172px;
      border-radius: 100px;
    }

    .user_top_font_left {
      position: inherit;
      margin: 9px;
      border-radius: 20px;
      color: #FFD700;
      width: 260px;
      padding: 10px;
      margin-bottom: 30px;
      font-weight: 600;
      font-size: 30px;
      font-family: 'NZBZ';
    }

    .user_top_font_right {
      text-align: left;
      margin: 9px;
      padding: 10px;
      font-size: 22px;
      width: 350px;
      height: 30px;
      font-weight: 600;
      font-family: 'tttgbnumber';
      color: #FFFFFF;
      padding-left: 15px;
      display: flex;
      flex-wrap: nowrap;
    }

    .user_top_left_dh {
      font-family: 'NZBZ';
      background-color: rgba(19, 21, 22, 0.486);
      margin: 9px;
      border-radius: 20px;
      color: azure;
      margin-left: 13px;
      width: 240px;
      height: 40px;
      padding: 5px;
      font-size: 35px;
      text-align: center;
      box-shadow: 3px 2px 3px #ccc;
    }

    .use_data {
      margin: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      width: 740px;
    }

    .user_font {
      text-align: left;
      margin: 9px;
      font-size: 22px;
      padding: 15px;
      font-weight: 600;
      font-family: 'tttgbnumber';
      border-radius: 20px;
      color: #FFFFFF;
    }

    .user_font_title {
      text-align: center;
      padding-left: 0px;
      font-size: 30px;
      font-family: 'tttgbnumber';
      font-weight: 600;
      color: #FFFFFF;
    }

    .wupin {
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      margin: 10px;
      padding: 10px;
      flex-grow: 2;
      width: 160px;
      border: 1px solid #FFFFF0;
      box-shadow: 1px 2px 6px rgba(170, 31, 0, 0.2), 3px 8px 12px rgba(71, 35, 22, 0.3);
      z-index: 999;
      border-radius: 5px;
      margin-top: 20px;
    }

    .item_title {
      display: block;
      text-align: center;
      font-family: 'NZBZ';
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      background-color: #221d103b;
    }

    .item_int {
      display: block;
      font-family: 'tttgbnumber';
      font-size: 16px;
      font-weight: 500;
      color: #E0EEEE;
    }

    .wuqi {
      display: flex;
      flex-wrap: wrap;
    }

    .wuqi1 {
      display: flex;
      flex-grow: 2;
      width: 100%;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 10%);
    }

    .wuqi2 {
      display: flex;
      flex-grow: 2;
      width: 25%;
      font-size: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 10%);
      font-weight: 500;
    }

    .user_bottom1 {
      border-radius: 20px;
      width: 90%;
      margin: auto;
      background-image: radial-gradient(rgba(180, 153, 152, 0.408), rgba(230, 222, 128, 0.312));
    }

    .user_bottom2 {
      border-radius: 20px;
      width: 90%;
      margin: auto;
      height: 20px;
    }

    .blood_box {
      width: 280px;
      height: 100%;
      background-color: rgba(6, 6, 7, 0.55);
      border-radius: 15px;
      box-shadow: 0 8px 32px rgba(43, 45, 59, 0.36);
    }

    .blood_bar {
      position: relative;
      width: 30%;
      height: 100%;
      background-color: rgba(222, 210, 73, 0.6);
      border-radius: 15px;
    }

    .blood_volume {
      position: relative;
      top: -28px;
      text-align: center;
      width: 300px;
      height: 100%;
      font-weight: 500;
      font-family: 'NZBZ';
      font-size: 20px;
      color: aliceblue;
    }

    .price {
      display: inline-block;
      padding: 5px;
      margin-top: 5px;
      border-radius: 5px;
      background-color: #221d103b;
      color: #E0EEEE;
    }

    .currency {
      font-size: 14px;
      font-weight: 400;
    }
  </style>
</head>

<body>
  <div class="header"></div>
  <div class="card_box">
    <div class="user_top_left">
      <div class="user_top_img_bottom">
        <!--<img class="user_top_img" src="12" onerror="whenError(this)"/>-->
      </div>
      <div class="user_top_font_left">{{player.uid}}</div>
    </div>
    <div class="user_top_right">
      <div class="user_top_font_right">道号：{{player.名号}}</div>
      <div class="user_top_font_right">
        生命：
        <div class="blood_box">
          <div class="blood_bar" {{strand_hp.style}}></div>
          <div class="blood_volume">{{player.当前血量}}/{{player.血量上限}}</div>
        </div>
      </div>
    </div>
  </div>
  {{if bag.道具.length > 0}}
  <div class="card_box">
    <div class="use_data">
      <div class="user_font">
        <div class="user_font_title">【道具】</div>
        <div class="wupin">{{each bag.道具 item}}
          <div class="item">
            <div class="item_int">名字：{{item.name}}</div>
            <div class="item_int">类别：{{item.type}}</div>
            <div class="item_int">价格：
              <span class="price">下级灵石{{item.货币.下级灵石}}<span class="currency">|</span></span><span class="price">中级灵石{{item.货币.中级灵石}}<span
                  class="currency">|</span></span><span class="price">高级灵石{{item.货币.高级灵石}}<span class="currency">|</span></span><span class="price">极品灵石{{item.货币.极品灵石}}<span class="currency">|</span></span>
            </div>
            <div class="item_int">数量：{{item.数量}}</div>
            <div class="item_int">介绍：{{item.doc}}</div>
          </div>
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  {{/if}}
  {{if bag.功法.length > 0}}
  <div class="card_box">
    <div class="use_data">
      <div class="user_font">
        <div class="user_font_title">【功法】</div>
        <div class="wupin">{{each bag.功法 item}}
          <div class="item">
            <div class="item_int">名字：{{item.name}}</div>
            <div class="item_int">类别：{{item.type}}</div>
            <div class="item_int">价格：<span class="price">下级灵石{{item.货币.下级灵石}}<span class="currency">|</span></span><span class="price">中级灵石{{item.货币.中级灵石}}<span
              class="currency">|</span></span><span class="price">高级灵石{{item.货币.高级灵石}}<span class="currency">|</span></span><span class="price">极品灵石{{item.货币.极品灵石}}<span class="currency">|</span></span>
            </div>
            <div class="item_int">数量：{{item.数量}}</div>
            <div class="item_int">介绍：{{item.doc}}</div>
            <div class="item_int">修炼加成：{{item.修炼加成}}</div>
            <div class="item_int">防御加成：{{item.防御加成}}</div>
            <div class="item_int">攻击加成：{{item.攻击加成}}</div>
            <div class="item_int">生命加成：{{item.生命加成}}</div>
            <div class="item_int">闪避加成：{{item.闪避加成}}</div>
            <div class="item_int">暴击加成：{{item.暴击加成}}</div>
            <div class="item_int">爆伤加成：{{item.爆伤加成}}</div>
          </div>
          {{/each}}
        </div>
      </div>
    </div>
  </div>
  {{/if}}
  <div class="user_bottom2"></div>
</body>

</html>